<style scoped>
:deep(.el-radio-button__inner){
    padding: 6px 8px !important;
}
.cursor{
    cursor: pointer;
}

.container {
    position: relative;
    width: 100%;
}

.control{
    position: absolute;
    width: 30%;
}
.top-control {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.left-control {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.right-control {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.bottom-control {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.center-container {
    height: 100px;
}
</style>

<template>
    <div class="row">
        <el-checkbox v-model="comp.enabled">{{ comp.__classname__ }}</el-checkbox>
        <el-button round size="small" :icon="Document" @click="gm.toConsole(comp)"></el-button>
    </div>

    <div class="row-start" style="margin-left: 25px; margin-right: 25px;">
        <div class="container">
            <div class="control top-control">
                <el-checkbox v-model="comp.isAlignTop">Top</el-checkbox>
                <el-input-number v-model="comp.editorTop" size="small" :disabled="!comp.isAlignTop" :controls="false" :step="0.1">
                    <template #suffix>
                        <span class="cursor" @click="comp.isAbsoluteTop = !comp.isAbsoluteTop">{{ comp.isAbsoluteTop ? 'px' : '%' }}</span>
                    </template>
                </el-input-number>
            </div>
            <div class="control left-control">
                <el-checkbox v-model="comp.isAlignLeft">Left</el-checkbox>
                <el-input-number v-model="comp.editorLeft" size="small" :disabled="!comp.isAlignLeft" :controls="false" :step="0.1">
                    <template #suffix>
                        <span class="cursor" @click="comp.isAbsoluteLeft = !comp.isAbsoluteLeft">{{ comp.isAbsoluteLeft ? 'px' : '%' }}</span>
                    </template>
                </el-input-number>
            </div>
            <div class="center-container" />
            <div class="control right-control">
                <el-checkbox v-model="comp.isAlignRight">Right</el-checkbox>
                <el-input-number v-model="comp.editorRight" size="small" :disabled="!comp.isAlignRight" :controls="false" :step="0.1">
                    <template #suffix>
                        <span class="cursor" @click="comp.isAbsoluteRight = !comp.isAbsoluteRight">{{ comp.isAbsoluteRight ? 'px' : '%' }}</span>
                    </template>
                </el-input-number>
            </div>
            <div class="control bottom-control">
                <el-checkbox v-model="comp.isAlignBottom">Bottom</el-checkbox>
                <el-input-number v-model="comp.editorBottom" size="small" :disabled="!comp.isAlignBottom" :controls="false" :step="0.1">
                    <template #suffix>
                        <span class="cursor" @click="comp.isAbsoluteBottom = !comp.isAbsoluteBottom">{{ comp.isAbsoluteBottom ? 'px' : '%' }}</span>
                    </template>
                </el-input-number>
            </div>
        </div>
    </div>

    <div class="row-start" style="margin-left: 25px; margin-right: 25px;justify-content: space-between">
        <div style="width: 45%;">
            <el-checkbox v-model="comp.isAlignHorizontalCenter">Horizontal Center</el-checkbox>
            <el-input-number v-model="comp.editorHorizontalCenter" size="small" :disabled="!comp.isAlignHorizontalCenter" :controls="false" :step="0.1">
                <template #suffix>
                    <span class="cursor" @click="comp.isAbsoluteHorizontalCenter = !comp.isAbsoluteHorizontalCenter">{{ comp.isAbsoluteHorizontalCenter ? 'px' : '%' }}</span>
                </template>
            </el-input-number>
        </div>
        <div style="width: 45%;">
            <el-checkbox v-model="comp.isAlignVerticalCenter">Vertical Center</el-checkbox>
            <el-input-number v-model="comp.editorVerticalCenter" size="small" :disabled="!comp.isAlignVerticalCenter" :controls="false" :step="0.1">
                <template #suffix>
                    <span class="cursor" @click="comp.isAbsoluteVerticalCenter = !comp.isAbsoluteVerticalCenter">{{ comp.isAbsoluteVerticalCenter ? 'px' : '%' }}</span>
                </template>
            </el-input-number>
        </div>
    </div>

    <div class="row-start">
        <el-text class="span-title" truncated>Target</el-text>
        <el-input size="small" disabled :value="gm.targetName(comp.target)" />
    </div>

    <div class="row-start">
        <el-text class="span-title" truncated>AlignMode</el-text>
        <el-select v-model="comp.alignMode" size="small">
            <el-option v-for="item in alignMode.__enums__" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
    </div>
</template>

<script lang="ts" setup>
import { Document } from '@element-plus/icons-vue'
import gm from './gm'

defineProps<{
    comp: CCComponent,
    update: Number,
}>()
const alignMode = cc.Widget.AlignMode

</script>